$(function(){



    // 广场详情页收缩展开
    var oSquDetFold = $('#detail_fold');
    var oSquDetUnfold = $('#detail_unfold');
    var oSquDetBtn = $('.fold_btn');

    oSquDetUnfold.hide();

    $('body').on('tap', '.fold_btn', function(){
        oSquDetFold.toggle();
        showHide(oSquDetBtn, oSquDetUnfold, '&#xe61a;', '&#xe61f;');
    });



    //我的兴趣页收缩展开
    var oSelectedBtn = $('.selected_fold_btn').eq(0);
    var oSelectdCon = $('#selected_con');


    if(oSelectdCon.children('span').length == 0){
        oSelectdCon.hide();
        oSelectedBtn.html('&#xe61f;');
    }
    else{
        oSelectdCon.show();
        oSelectedBtn.html('&#xe61a;');
    }
    // oSeleectdCon.hide();
    $('.item_list_wrap').hide();
    $('.item_list_wrap').eq(0).show();
    

    $('body').on('tap', '.selected_fold_btn', function(){

        showHide(oSelectedBtn, oSelectdCon, '&#xe61a;', '&#xe61f;');

    });

    $('body').on('tap', '.list_fold_btn', function(){

        var oCon = $(this).parent().siblings();
        showHide($(this), oCon, '&#xe618;', '&#xe619;');
        var oSibP = $(this).parent().parent().siblings();
        oSibP.find('.item_list_wrap').hide()
        oSibP.find('.list_fold_btn').html('&#xe619;');

    });
        

    // 我的兴趣span点击效果
    var oSelected = $('#selected_con');

    $('body').on('tap', '.item_list_wrap span', function(){

        var me = $(this);
        if(me.find('i').length==0){
            me.append('<i class="iconfont">&#xe61e;</i>');
        }
        
        me.toggleClass('active');
        if(me.hasClass('active')){
            me.clone().appendTo(oSelected);
            oSelected.find('i.iconfont').remove();

        }
        else{
            oSelected.find('span[name='+me.attr('name')+']').remove();
        }

        oSelectdCon.show();
        oSelectedBtn.html('&#xe61a;');
    });


    //活动档案home页选项卡
    allTab('.acth_btn_wrap span', $('.acth_list'));

    // 个人主页选项卡
    allTab('#user_btn_wrap span', $('#user_tab_wrap section'));

    //广场页选项卡
    allTab('#squ_btn_wrap span', $('#squ_con_wrap section'));



    // 个人主页兴趣头像轮播
    headImgSwitch('#my_in_wrap', 0);

    //活动档案详情页头像轮播
    headImgSwitch('#attend_peo_wrap', 0);

    //已完成活动档案头像轮播
    headImgSwitch('#mycompany_wrap', 2);
    


    //五星评分
    $('body').on('tap', '.comment_star i', function(){
        // alert($(this).index());
        var me = $(this);
        me.addClass('active').prevAll().addClass('active')
        me.nextAll().removeClass('active');
        me.parent().siblings('strong').html((me.index()+1)+'分');
    });


    // 点赞数字加1......暂时还是一直加1，个人信息页有bug，会加2
     $('body').on('tap', '.num_add i', function(){
        var oNum = $(this).siblings('span');
        var now = parseInt(oNum.html())+1;
        oNum.html(now);
     });


     //已完成活动页点击更多加载评论
     $('body').on('tap', '#done_more_com_btn', function(){
        var comLiStr = '<li>'+
                '<div class="head_img">'+
                    '<img src="" alt="" />'+
                '</div>'+
                '<div class="comment_wrap">'+
                    '<span class="user_name">AAA啦</span>'+
                    '<em class="per_lab">达人</em>'+
                    '<div class="com_mark">'+
                        '<i class="iconfont active">&#xe629;</i>'+
                        '<i class="iconfont">&#xe629;</i>'+
                        '<i class="iconfont">&#xe629;</i>'+
                        '<i class="iconfont">&#xe629;</i>'+
                        '<i class="iconfont">&#xe629;</i>'+
                    '</div>'+
                    '<div class="comment">'+
                        '今天的游戏很好玩，今天的游戏很好玩，今天的游戏很好玩，今天的游戏很好玩，今天的游戏很好玩，今天的游戏很好玩，今天的游戏很好玩，'+
                    '</div>'+
                '</div>'+
            '</li>';

        comLiStr += comLiStr;

        $('#done_comment').append(comLiStr);
     });


    //引导页首页切换动画效果
    var aSubList = $('.fp_sub_list');
    var aCircle = $('#fp_main li');
    var acircleData = [];
    var j = 2;
    // alert(parseInt(aCircle.css('fontSize'))*3+'px');
    

    aCircle.each(function(i){
        acircleData.push([aCircle.eq(i).css('top'), aCircle.eq(i).css('right'), aCircle.eq(i).css('opacity'), aCircle.eq(i).css('width'), aCircle.eq(i).css('height'), aCircle.eq(i).css('fontSize')]);

        // $(this).find('span').css('fontSize', parseInt($(this).css('fontSize'))*3+'px');
    });
	//添加滑动事件，加上动画效果
    $('body').on('swipedown', '#fp_main', function(){
        acircleData.push(acircleData[0]);
        acircleData.shift();

        doCircleSw(-1);
        
    });

    $('body').on('swipeup', '#fp_main', function(){
        acircleData.unshift(acircleData[acircleData.length-1]);
        acircleData.pop();

        doCircleSw(1);
        
    });


    function doCircleSw(num){
        j += num;
        if(j>=0 && j<=acircleData.length-1){
            if(j<2 && j>=0){
                aCircle.eq(acircleData.length-1).hide();
                aCircle.eq(acircleData.length-2).hide();
            }
            else if(j>2 && j<=acircleData.length-3){
                aCircle.eq(acircleData.length-1).show();
                aCircle.eq(acircleData.length-2).show();
                aCircle.eq(0).show();
                aCircle.eq(1).show();
            }
            else if(j>acircleData.length-3 && j<=acircleData.length-1){
                
                aCircle.eq(0).hide();
                aCircle.eq(1).hide();
            }
            

            aCircle.each(function(i){
                aCircle.removeClass('active');
                aSubList.hide();
                aSubList.eq(j).show();

                pageSW();

                aCircle.eq(i).stop().animate({top: acircleData[i][0], right: acircleData[i][1], opacity: acircleData[i][2], width: acircleData[i][3], height: acircleData[i][4], lineHeight: acircleData[i][4], fontSize: acircleData[i][5]}, 600, function(){
                    
                    aCircle.eq(j).addClass('active');
                });

                // aCircle.eq(i).find('span').stop().animate({fontSize: parseInt(acircleData[i][5])*3+'px'}, 600);
                // alert(acircleData[i][5]);
                // $(this).css('fontSize', parseInt($(this).css('fontSize'))*3+'px');
                
            })
        }
    }

    //引导首页子项翻页效果
    $('body').on('tap', '.fp_sub_list span', function(){
        $(this).toggleClass('active');
    });

    pageSW();

    function pageSW(){
        aSubList.each(function(index){

            if ($(this).is(":visible")) {

                var aPage = $(this).find('.sub_page_wrap');
                var aPageWidth = aPage.width();
                var pageBtn = $('.sub_btn');
                var iNow = 0;

                doPage( 0 ); 

                if(aPage.length==1){
                    pageBtn.hide();
                }else if(aPage.length>1){
                    pageBtn.show();
                    pageBtn.find('.sub_prev').hide();
                }

                $(this).css('width', aPageWidth*aPage.length);

                $('body').on('tap', '.sub_prev', function(){
                    doPage( -1 );
                });

                $('body').on('tap', '.sub_next', function(){
                    doPage( 1 );
                });

                function doPage( num ) {
                    iNow += num;
                    if ( iNow > aPage.length-1 ) {
                        iNow = aPage.length-1;
                    }
                    if ( iNow < 0 ) {
                        iNow = 0;
                    }
                    
                    aSubList.eq(index).stop().animate({left: -iNow*aPageWidth}, 300);
                    
                    if(iNow==0){
                        pageBtn.find('.sub_prev').hide();
                        pageBtn.find('.sub_next').show();
                    }
                    if (iNow==aPage.length-1){
                        pageBtn.find('.sub_next').hide();
                        pageBtn.find('.sub_prev').show();
                    }
                    else if(iNow>0 && iNow<aPage.length-1){
                        pageBtn.find('.sub_next').show();
                        pageBtn.find('.sub_prev').show();
                    }
                }    

            }
        });    
    }
    
            

    
    
    

    //已完成活动档案页3d轮播效果
    var aImgList = $('.done_img_3d');
    var aStorage = [];
    var k=1;

    explainSw();

    aImgList.each(function(i){
        aStorage.push([aImgList.eq(i).css('top'), aImgList.eq(i).css('left'), aImgList.eq(i).css('zIndex'), aImgList.eq(i).css('width'), aImgList.eq(i).css('height'), aImgList.eq(i).css('opacity')]);
    });

    $('body').on('swiperight', '#done_img_sw_wrap', function(){
        aStorage.push(aStorage[0]);
        aStorage.shift();
        k--;


        if(k>=0){
            doImgSw();
            explainSw(); 

            if(k<aImgList.length-2){
                aImgList.eq(0).show();  
                aImgList.eq(aImgList.length-1).hide();    
            }
               
        }
 
        
    });

    $('body').on('swipeleft', '#done_img_sw_wrap', function(){
        aStorage.unshift(aStorage[aStorage.length-1]);
        aStorage.pop();
        k++;
        

        if(k<=aImgList.length-1){
            doImgSw();
            explainSw();  
            if(k>1){
                aImgList.eq(0).hide(); 
                aImgList.eq(aImgList.length-1).show();      
            }
            
        }
        
    });
 
    function doImgSw(){
        aImgList.each(function(i){
            aImgList.eq(i).css('zIndex', aStorage[i][2]);
            aImgList.eq(i).stop().animate({top: aStorage[i][0], left: aStorage[i][1], width: aStorage[i][3], height: aStorage[i][4], opacity: aStorage[i][5]}, 600);
        });      
    }

    function explainSw(){
        aImgList.find('.img3d_explain').hide();
        aImgList.eq(k).find('.img3d_explain').show();
    }




    //绘制饼图
    
    var dataArr = [0.6, 0.4];
    var colorArr = ["#3A4149", "#FFDA44"];
    var textArr = ["想尝试的", "喜爱的"];
    drawCircle("circle1", document.body.clientWidth/2, document.body.clientHeight/8, document.body.clientHeight/12, dataArr, colorArr, textArr);

    var dataArr = [0.3, 0.4, 0.3];
    var colorArr = ["#3A4149", "#FFDA44", "#009944"];
    var textArr = ["想尝试的", "喜爱的", "感兴趣的"];
    drawCircle("circle2", document.body.clientWidth/2, document.body.clientHeight/8, document.body.clientHeight/12, dataArr, colorArr, textArr);

    //用户资料页评价点击高亮
    

});




// 点击显示隐藏函数
function showHide(oBtn, oCon, oUpstr, oDownStr){
    oCon.toggle();

    if(oCon.css('display') == 'none'){
        oBtn.html(oDownStr);
    }
    else{
        oBtn.html(oUpstr);
    }
}


// 选项卡函数
function doTab(tabBtn, tabCon){
    tabBtn.addClass('active')
      .siblings().removeClass('active');
    tabCon.hide();
    tabCon.eq(tabBtn.index()).show();
}

// 选项卡整体封装
function allTab(tabBtnStr, tabCon){
    doTab($(tabBtnStr).eq(0), tabCon);

    $('body').on('tap', tabBtnStr, function(){

        var me = $(this);
        doTab(me, tabCon);
    });
}



// 头像轮播函数
function headImgSwitch(parentStr, controlNum){

    var oOl = $(parentStr).find('ol').eq(0);
    var aLi = $(parentStr).find('li');
    var iWidth = aLi.eq(0).width();
    var iNow = 0;

    aLi.eq(2).addClass('active');
    
    $('body').on('tap', '#in_pre', function(){
        doMove(-1);
    });

    $('body').on('tap', '#in_next', function(){
        doMove(1);
    });
    $('body').on('swipeleft', parentStr, function(){
        doMove(1);
    });
    $('body').on('swiperight', parentStr, function(){
        doMove(-1);
    });
    
    function doMove( num ) {
        iNow += num;
        if ( iNow > aLi.length-5 + controlNum) {
            iNow = aLi.length-5 + controlNum;
        }
        if ( iNow < 0 - controlNum) {
            iNow = 0 - controlNum;
        }
        
        oOl.stop().animate({ 'left': -iNow*iWidth}, 300);
        aLi.removeClass('active');
        aLi.eq(iNow+2).addClass('active');
    }

}


//绘制饼图函数
function drawCircle(canvasId, oxIni, oyIni, oRadius, dataArr, colorArr, textArr)
{
    var c = document.getElementById(canvasId);
    c.width = document.body.clientWidth; 
    c.height = document.body.clientHeight/4;
    var ctx = c.getContext("2d");
    var angle = 0;

    var startAngle = 0; //起始弧度
    var endAngle = 0;   //结束弧度


    //绘制饼图    

    var oAngle = 0;
    for(var i=0; i<dataArr.length; i++){

        endAngle = endAngle + dataArr[i] * Math.PI * 2; //结束弧度

        oAngle = (angle + dataArr[i]/2)*Math.PI*2;
        angle += dataArr[i];

        //设置圆弧圆心
        ox = 4*Math.cos(oAngle) + oxIni;
        oy = 4*Math.sin(oAngle) + oyIni;

        //设置文字绘制位置
        if(oAngle<Math.PI/2 || oAngle>3*Math.PI/2){
          posX = (oRadius+20)*Math.cos(oAngle) + oxIni
          posY = (oRadius+20)*Math.sin(oAngle) + oyIni;  
        }
        else{
          posX = (oRadius+30)*Math.cos(oAngle) + oxIni
          posY = (oRadius+30)*Math.sin(oAngle) + oyIni;
        }
    
        //绘制圆弧
        ctx.fillStyle = colorArr[i];
        ctx.beginPath();
        ctx.moveTo(ox, oy); //移动到到圆心
        ctx.arc(ox, oy, oRadius, startAngle, endAngle, false);
        ctx.closePath();
        ctx.fill();
        startAngle = endAngle; //设置起始弧度

        //绘制比例图及文字
        ctx.fillStyle = colorArr[i];
        // ctx.fillRect(posX, posY, width, height);
        ctx.moveTo(posX, posY);
        ctx.font = 'bold 14px 微软雅黑';    //斜体 30像素 微软雅黑字体
        ctx.fillStyle = colorArr[i]; //"#000000";
        var percent = textArr[i] + "：" + 100 * dataArr[i] + "%";
        ctx.fillText(percent, posX, posY);
    }
}































